<template>
	<view>
		<!-- 讨论详情 -->
		<view class="discuss_box">
			<p class="topic">话题：{{discuss.topic}}</p>
			<p class="source">来源：{{discuss.source}}</p>
			<p class="dis_con_3">
				<span class="see">浏览：{{discuss.see}}次</span>
				<span class="join">已有{{discuss.join}}人参与</span>
			</p>
		</view>
		<!--  -->
		<view class="container">
			<p v-if="no" @click="follow">
				<img src="http://127.0.0.1:7001/public/lfyimg/follow.png" alt="">
				关注话题
			</p>
			<p v-if="yes" @click="follow">
				<img src="http://127.0.0.1:7001/public/lfyimg/follow_clr.png" alt="">
				已关注
			</p>
			<p @click="addAnswer">
				<img src="http://127.0.0.1:7001/public/lfyimg/answer.png" alt="">
				添加回答
			</p>
		</view>

		<view class="bg_clr">
			<!-- 回答 -->
			<view v-for="item in answer" :key="item.id" class="answer_box">
				<p class="p_flex">
					<span class="name">{{item.name}}</span>
					<span class="date">{{item.date.slice(0,10)}}</span>
				</p>
				<p @click="getAnswerDetails(item)" class="content">{{item.content}}</p>
				<p class="p_flex">
					<span class="thumb">
						<!-- v-if="noZan" v-if="yesZan" @click="zan()"  -->
						<u-icon @click="zan(item)" class="icon" name="thumb-up"></u-icon>
						<!-- <u-icon class="icon" name="thumb-up-fill"></u-icon> -->
						{{item.thumb}}
					</span>
					<span class="chat">
						<u-icon class="icon" name="chat"></u-icon>
						{{item.chat}}
					</span>
				</p>
			</view>
		</view>

	</view>
</template>

<script>
	import shijianc from '@/pages/Home/time.js'
	export default {
		data() {
			return {
				discuss: {},
				answer: [],
				no: true,
				yes: false,
				ids: '',
				// noZan:true,
				// yesZan:false
			}
		},
		onLoad(option) {
			this.ids = option.id
			this.$api.searchDiscuss({
					// id: option.id
					id: this.ids
				}).then(res => {
					this.discuss = res.data
					console.log(this.discuss)

				})
				
				

		},
		onShow(){
			// 回答
			this.$api.lfyanswer().then((res) => {
				console.log(res)
				// this.answer = res.data
				this.answer = res.data
			})
		},


		methods: {
			// 收藏
			follow() {
				this.no = !this.no
				this.yes = !this.yes
			},

			// 路由-回答
			getAnswerDetails(item) {

				uni.navigateTo({
					url: `/pages/Home/lfyAnswerDetails?id=${item.id}`,

				})
			},

			// 路由-添加回答
			addAnswer(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/Home/lfyAddAnswer'
				})
			},

			// 

// zan(){
// 	this.noZan = !this.noZan,
// 	this.yesZan = !this.yesZan
// },
			// 
			zan(item) {
				console.log(item)
				if (item.zan == '0') {
					item.zan = 1
					item.thumb = Number(item.thumb) + 1
					// this.yesZan = !this.yesZan
					this.$api.upThumb({
						id: item.id,
						zan: item.zan,
						thumb: item.thumb,
					}).then(res => {
						console.log('+')
					})
				} else {
					item.zan = 0
					item.thumb = Number(item.thumb) - 1
					this.$api.upThumb({
						id: item.id,
						zan: item.zan,
						thumb: item.thumb
					}).then(res => {
						console.log("-")
					})
				}
			},

			// 
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.bg_clr {
		background-color: #f0f0f0;
		padding: 20upx 0;
	}

	.discuss_box {
		background-color: #fafafa;
		border-bottom: 2upx solid #cbcbcb;
		padding: 10upx 30upx;

		p {
			height: 60upx;
			line-height: 60upx;
		}

		.topic {
			color: #171717;
			font-size: 28upx;
		}

		.source {
			color: #646464;
			font-size: 24upx;
		}

		.dis_con_3 {
			color: #646464;
			font-size: 22upx;
			text-align: right;

			.join {
				margin-left: 60upx;
			}
		}
	}

	// 
	.container {
		height: 90upx;
		line-height: 90upx;
		display: flex;
		// justify-content: space-around;
		background-color: #fafafa;

		p {
			width: 50%;
			color: #8fc31f;
			font-size: 28upx;
			text-align: center;

			img {
				width: 8%;
				margin-right: 20upx;
				vertical-align: middle;
			}
		}
	}

	// 	回答
	.answer_box {
		padding: 20upx 30upx;
		margin-bottom: 20upx;
		background-color: #fafafa;

		.p_flex {
			display: flex;
			justify-content: space-between;
			height: 60upx;
			line-height: 60upx;

			.name {
				color: #171717;
				font-size: 28upx;
			}

			.date {
				color: #646464;
				font-size: 24upx;
			}

			.thumb {
				color: #646464;
				font-size: 24upx;
			}

			.chat {
				color: #646464;
				font-size: 24upx;
			}

			span {
				.icon {
					float: left;
					// vertical-align: middle;
					margin-top: 12upx;
					margin-right: 10upx;
				}
			}
		}

		.content {
			font-size: 24upx;
			color: #323232;
		}
	}
</style>
